<template>
<div>
    <button @click="isOpen=!isOpen" class="group-btn">{{group.group}}</button>
    
    <transition name="slide">
        <ul 
            v-show="isOpen"
            :style="ulStyle"
        >
            <li v-for="f in group.list">{{f}}</li>
        </ul>
    </transition>
    
</div>
</template>

<script>
export default {
    props:["group"],
    data:function(){
        return {
            isOpen:true
        }
    },
    computed:{
        ulStyle:function(){
            var h = this.group.list.length*22+"px";
            return {
                height:h
            }
        }
    }
}
</script>

<style scoped>
    ul{
       background: linear-gradient(to bottom, pink 30%, lightskyblue 60%, lightgreen);
        margin: 0;
        list-style: none;
        text-align: center;
        font-size: 18px;
    }
    li{
        line-height: 20px;
    }
    .group-btn{
        width: 100%;
        height: 40px;
        font-size: 17px;
         background: linear-gradient(to bottom,plum 30%, yellow 60%, lightskyblue 100%);
    }
    
    .slide-enter{
        height: 0 !important;
    }
    
    .slide-enter-active{
        transition: all 0.7s linear;
        overflow: hidden;
    }
    
    .slide-leave{
        
    }
    .slide-leave-active{
        height: 0 !important;
        transition: all 0.7s linear;
        overflow: hidden;
    }
</style>
